<template>
	<view class="u-page">
		<div class="body-cont">
			<ul class="content">
				<div class="conlirow">
					<div class="cont-right" style="width:100%;">
						<P class="adress flex">
							<span class="xmname">地区：</span>
							<span class="name">
								<!-- u-input v-model="Region" type="select" height="100" placeholder="请选择"
									@click="area_show = true" /> -->
									
									<div style="width: 480rpx;" @click="area_show = true">
										<span v-if="Region">{{Region}}</span>
										<span v-else>请选择</span>
									</div>
									
							</span>
							<u-picker mode="region" v-model="area_show" @confirm="confirmRegion"></u-picker>
						</P>
						
						<P class="adress flex">
							<span class="xmname">街道：</span>
							<span class="name">
								<!-- <u-input v-model="Street" type="select" height="100" placeholder="请选择"
									@click="street_show = true" /> -->
									
									<div style="width: 480rpx;" @click="street_show = true">
										<span v-if="Street">{{Street}}</span>
										<span v-else>请选择</span>
									</div>
									
							</span>
							<u-picker mode="selector" v-model="street_show" :range="StreetList"
								@confirm="Street = StreetList[$event]">
								<!-- @confirm="(event) => (Street = `${event.code}`)" -->
							</u-picker>
						</P>
						
						<P class="adress">
							<span class="xmname" style="">详细地址：</span>
							<span class="name" style="width: 80%;">
								<u-input v-model="Address" type="textarea" height="100" :auto-height="true"
									placeholder="请填写详细地址" @blur="saveAddress"/>
							</span>
						</P>

						<P class="adress">
							<span class="xmname" style="">完整地址：</span>
							<span class="name" style="width: 80%;">
								<u-input v-model="FullAddress" type="textarea" height="100" :auto-height="true" disabled="true"/>
							</span>
						</P>

					</div>
				</div>
				
				<div class="u-mt-20 u-mb-10 solitaire-box">
				
					<!-- <div style="margin-bottom: 10px;">
						<u-button type="primary" shape="square" :disabled="isClick" @click="CreatedSolitaire_Show = true">
							开团
						</u-button>
					</div> -->
					<div style="margin-bottom: 10px;">
						<u-button type="primary" shape="square" @click="saveAddress">
							获取地址
						</u-button>
					</div>
				
					<div style="margin-bottom: 10px;">
						<u-button type="success" shape="square"  @click="matchAddress">
							匹配分销商
						</u-button>
					</div>
					
				</div>
				
				<div class="u-mt-20 u-mb-10 solitaire-box bg-white">
					<div class="n-goodsdetailbar">
						<p class="txt">匹配记录</p>
						<img class="v-img"
							src="https://dev.openea.net/linkey/bpm/appfile/Review/8cdd326d-c127-4f53-8183-85fac74233de.jpg">
					</div>
					<view class="certificate">
						<view class="certificateItemMain" v-if="DistributorList&&DistributorList.length>0">
							<view class="certificateItem messageItem" v-for="(item,index) in DistributorList">
								<view class="messageTop">
									<view class="imgbox">
										<image class="_img" :src="item.distributorImg"></image>
									</view>
									<view class="name">
										<view class="text1">{{item.distributorName}}</view>
										<view class="text2">{{item.distributorAddr}}</view>
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="item-area u-pt-50 u-pb-50" style="margin: 0 auto;">
								<u-empty text="暂无记录" mode="data"></u-empty>
							</view>
						</view>
					</view>
				</div>
			</ul>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Region: "",
				Street: "",
				Address: "",
				FullAddress: "",
				area_show: false,
				street_show: false,
				pageNum: 1,
				pageSize: 5,
				StreetList: [],
				DistributorList:[],
				//DistributorList: [{"distributorName":"十里香蛋糕店","distributorAddr":"北京市-市辖区-东城区-景山街道","distributorid":"b20aea600610104c910850e059da9f5deb21","distributorImg":"https:\/\/www-1308272144.cos.ap-guangzhou.myqcloud.com\/perpartner\/UserAvatar\/0329112804896824_0.png"}], // 分销商品匹配记录
			};
		},
		mounted() {
			
		},
		methods: {

			// 确认选择
			async confirmRegion(event) {
				console.log("确认选择地区....");
				console.log(event);
				this.Region = event.province.label + '-' + event.city.label + '-' + event.area.label;
				this.Street = "";
				
				if(this.isNotNull(event.area.value)){
					
					// 先清空数组
					this.StreetList.splice(0, this.StreetList.length);
					
					// 获取街道列表
					const userInfo = uni.getStorageSync('userInfo');
					let result = await this.$u.api.unifyRequest({
						userId: userInfo.userId,
						nickName: userInfo.nickName,
						appid: 'Archives',
						wf_num: 'R_Archives_BL026',
						areaCode: event.area.value,
						loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
					});
					if (result.code == 200) {
						this.StreetList = result.data
					}
					//console.log("this.StreetList.length=", this.StreetList.length);
				}
			},
			
			// 确认选择街道
			confirmStreet(event){
				console.log("确认选择街道....");
				console.log(event);
				
				this.Street = event.label;
			},
			
			// 获取地址
			saveAddress(){
				if(!this.isNotNull(this.Region)){
					this.$u.toast("请选择地区！");
					return;
				}
				
				if(!this.isNotNull(this.Street)){
					this.$u.toast("请选择街道！");
					return;
				}
				
				if(!this.isNotNull(this.Address)){
					this.$u.toast("请填写详情地址！");
					return;
				}
				
				this.FullAddress = this.Region + '-' + this.Street + ' ' + this.Address;
				console.log("选择地址:" + this.FullAddress);
			},
			
			// 匹配分销商
			async matchAddress(){
				let fulladdr = this.FullAddress;
				const userInfo = uni.getStorageSync('userInfo');
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'AddrMatch',
					wf_num: 'R_AddrMatch_B001',
					address: fulladdr,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				//result = JSON.parse(result);
				if (result.code == 200) {
					if(this.isNotNull(result.list)){
						this.DistributorList = result.list;
						console.log("匹配分销商：", this.DistributorList);
					}
				} else {
					this.showMSG('error', result.msg);
				}
			}
		},
	};
</script>

<style scoped>
	.body-cont {
		padding-left: 18px;
		padding-right: 18px;
	}

	.content {
		padding-top: 20px;
	}

	ol,
	ul {
		list-style: none;
	}

	.conlirow {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 0px;
	}

	.cont-right {
		display: flex;
		flex-direction: column;
	}

	.cont-right p {
		width: 100%;
	}

	.adress {
		border-bottom: rgba(59, 53, 60, 0.1) dashed 1px;
	}

	.adress span {
		font-size: 16px;
		height: 50px;
		line-height: 50px;
	}

	.xmname {
		opacity: 0.7;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #3B353C;
		line-height: 22px;
	}

	.name {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #3B353C;
		letter-spacing: 0;
		line-height: 22px;
	}

	input {
		width: 80%;
		color: #000;
		width: 480rpx;
	}

	input {
		border: none;
		outline: none;
		font-size: 14px;
	}

	input,
	select {
		vertical-align: middle;
	}

	.shezhi {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 5px 0px;
	}

	.bianji {
		font-size: 14px;
		color: #5F2570;
		letter-spacing: 0;
	}

	.bianji label img {
		width: 16px;
		margin-top: 5px;
	}

	.xzann {
		width: 100%;
		text-align: center;
		background: #5F2570;
		border-radius: 9px;
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		color: #FFFFFF;
	}

	.flex {
		display: flex;
	}
	
	.n-price {
		height: 50px;
		width: 93%;
		margin: 0 auto;
		color: #000000;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}
	
	.n-price__left {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		line-height: 110rpx;
	}
	
	.n-price .curprice {
		font-size: 15px;
		color: #e31436;
	}
	
	.n-price .curprice .curnum {
		font-size: 44rpx;
		font-weight: bold;
	}
	
	.n-price .mrkprice {
		text-decoration: line-through;
		margin-left: 5rpx;
		font-size: 30rpx;
		color: #999;
	}
	
	.n-price .tag {
		display: inline-block;
		padding: 0 5px;
		height: 15px;
		line-height: 15px;
		text-align: center;
		margin-left: 10px;
		vertical-align: 2px;
		font-size: 11px;
		color: #fff;
		background: #ff8587;
		border-radius: 3px;
	}
	
	.n-prdinfo {
		margin: 0 10px 10px;
		border-top: 1px solid #f0f0f0;
	}
	
	.n-prdinfo .tit {
		line-height: 32rpx;
		/* padding-top: 10px; */
		margin-bottom: 12rpx;
		width: 100%;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}
	
	.n-prdinfo .subtit {
		font-size: 13px;
		color: #333;
		line-height: 21px;
	}
	
	.n-prdinfo .subtit .spec {
		color: #e31436;
	}
	
	.n-prdinfo .presaletxt {
		color: #f00;
	}
	
	.u-graybar {
		background: #f1f1f1;
		height: 10px;
	}
	
	.n-activitybox {
		background-color: #FFFFFF;
		width: 90%;
		margin: 0 auto;
	}
	
	.n-activitybox .itm {
		position: relative;
		padding: 9px 0;
		/* border-bottom: 1px solid #f0f0f0; */
		zoom: 1;
	}
	
	.n-activitybox .itm:after {
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
		overflow: hidden;
		content: ".";
	}
	
	.n-activitybox .itm .name {
		float: left;
		height: 24px;
		line-height: 24px;
		font-size: 13px;
		color: #6f6e6e;
	}
	
	.n-activitybox .itm .cnt {
		margin-left: 50px;
		padding-top: 1px;
		padding-right: 10px;
	}
	
	.n-activitybox .itm:last-child {
		border-bottom: none;
	}
	
	.n-activitybox .v-linkicon {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0px;
		width: 10px;
		height: 10px;
		margin-top: auto;
		margin-bottom: auto;
		background-size: 200px;
	}
	
	
	.mrkprice {
		padding-left: 8rpx;
	}
	
	.v-sperate {
		height: 10px;
		background: #f1f1f1;
	}
	
	.n-goodsdetailbar {
		position: relative;
		height: 44px;
	}
	
	.n-goodsdetailbar .txt {
		position: absolute;
		top: 0;
		left: 0px;
		z-index: 9;
		width: 100%;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.n-goodsdetailbar .v-img {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 90rpx;
	}
	
	img {
		vertical-align: middle;
		border: 0;
	}
	
	.m-buybar {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background: #fff;
	}
	
	.m-buybar .btn-wrap {
		height: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	
	.m-buybar a {
		display: block;
		height: 50px;
		vertical-align: top;
		font-size: 15px;
		line-height: 50px;
		text-align: center;
	}
	
	.m-buybar .btn {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}
	
	.m-buybar .buynow {
		color: #fff;
		background: #e31436;
	}
	
	.m-buybar .buynow.btn-large {
		border: none;
		background-color: #d22147;
		color: #fff;
	}
	
	.m-buybar .buynow.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}
	
	.m-buybar .buynow.s-fc {
		background: #000;
	}
	
	.m-buybar .addcart {
		background-color: #ff8587;
		color: #fff;
	}
	
	.m-buybar .addcart.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}
	
	.m-buybar .collect {
		position: relative;
		/* width: 95px; */
		width: 140rpx;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		/* border-right: 1px solid #ddd; */
		color: #666;
		font-size: 24rpx;
	}
	
	.m-buybar .collect:after {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		top: 7px;
		left: 17px;
		background-size: 200px;
	}
	
	.m-buybar .collect-1 {
		background-position: -161px 1px;
	}
	
	.m-buybar .collect-1:after {
		background-position: -139px -33px;
	}
	
	.m-buybar .cart {
		position: relative;
		width: 55px;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		color: #666;
		font-size: 12px;
		background-size: 200px;
	}
	
	.m-buybar .cart .count {
		position: absolute;
		min-width: 16px;
		height: 16px;
		left: 27px;
		top: 2px;
		background-color: #fff;
		color: #e31436;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		padding: 0 4px;
		border: 1px solid #e31436;
	}
	
	.m-buybar .nogoods {
		position: absolute;
		top: -40px;
		left: 0;
		width: 100%;
		padding-left: 10px;
		background-color: rgba(0, 0, 0, 0.7);
		text-align: left;
		font-size: 16px;
		line-height: 40px;
		color: #fff;
	}
	
	.m-buybar .nogoods:after {
		content: "";
		position: absolute;
		width: 70px;
		height: 45px;
		left: 10px;
		top: -35px;
		background-size: 200px;
	}
	
	.m-buybar .cantdeliver {
		position: absolute;
		text-align: center;
		top: -40px;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		font-size: 12px;
		line-height: 40px;
		color: #fff;
	}
	
	.m-buybar .hide {
		display: none;
	}
	
	.bg-white {
		background-color: #FFFFFF;
	}
	
	.itm-value {
		font-weight: 500;
	}
	
	.f-els-1 {
		line-height: 48rpx;
	}
	
	.recovery {
		color: #fff;
		background: #eab315;
	}
	
	.view-pro {
		color: #fff;
		background: #3b79fe;
	}
	
	.slot-content {
		font-size: 28rpx;
		color: #bcbcbc;
		text-align: center;
		margin: 0 auto;
	}
	
	.infoblocks {
		background-color: #FFFFFF;
	}
	
	.remark-box {
		/* width: 95%; */
		margin: 0 auto;
	}
	
	.remark-rule {
		margin: 0rpx 40rpx 0rpx 40rpx;
	}
	
	.remark-rule-title {
		color: #6f6e6e;
		height: 24px;
		line-height: 24px;
		font-size: 13px;
	}
	
	.line-through {
		font-size: 32rpx;
		color: #919191;
		padding: 0 0.2rem;
		text-decoration: line-through;
	}
	
	.price-area {
		color: red;
	}
	
	.commodity-name {
		width: 93%;
		margin: 0 auto;
		color: #000000;
	}
	
	.work-free {
		width: 93%;
		margin: 0 auto;
		background-color: #fef9e6;
		color: #000000;
		padding: 20rpx;
	}
	
	.work-free .text1 {
		color: #3e3d3d;
	}
	
	.work-free .text2 {
		color: #7d7d7d;
	}
	
	.work-free .text2 span {
		color: red;
	}
	
	.notice-area {
		color: #7d7d7d;
		width: 93%;
		margin: 0 auto;
	}
	
	.aui-flex-goods {
		margin-right: .8em;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		float: left;
		display: inline;
	}
	
	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}
	
	.aui-flex-content {
		display: inline;
		width: 80px;
		height: 80px;
	}
	
	.aui-flex-title {
		font-weight: bold;
		color: #1d1b1b;
		font-size: 30rpx;
		padding-bottom: 10rpx;
	}
	
	.aui-flex-time {
		font-size: 24rpx;
		color: #bcbcbc;
		padding-top: 15rpx;
	}
	
	.solitaire-box {
		width: 95%;
		margin: 0 auto;
	}
	
	.certificate {
		border-top: 1px solid rgba(0, 0, 0, .08);
		margin-top: -6rpx;
		/* padding: 0 32rpx 0; */
	}
	
	.certificateItemMain {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		/* padding: 0 32rpx; */
	}
	
	.certificateItem {
		align-items: center;
		border-bottom: 1px solid rgba(0, 0, 0, .08);
		display: block;
		flex-direction: row;
		justify-content: space-between;
		padding: 32rpx 0;
	}
	
	.messageItem .messageTop {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}
	
	.messageTop .imgbox {
		border-radius: 50%;
		height: 72rpx;
		overflow: hidden;
		width: 72rpx;
		margin-right: 8px;
	}
	
	.messageItem .messageTop .imgbox ._img {
		display: block;
		height: 72rpx;
		width: 72rpx;
	}
	
	.messageItem .messageTop .name {
		color: #000;
		font-size: 28rpx;
		line-height: 1.2;
		overflow: hidden;
		padding-left: 0rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 560rpx;
	}
	
	.messageItem .messageTop .name .text1 .quantity_text {
		font-weight: 600;
	}
	
	.messageItem .messageTop .quantity {
		color: #000;
		font-size: 28rpx;
		line-height: 2.2;
		white-space: nowrap;
	}
	
	.messageItem .messageTop .quantity .quantity_text {
		color: red;
		font-size: 28rpx;
		font-weight: 400;
	}
	
	.quantity {
		padding-right: 20rpx;
	}
	
	.messageItem .messageTop .name .text2 {
		color: rgba(0, 0, 0, .5);
		font-size: 24rpx;
		font-weight: 600;
		margin-top: 10rpx;
	}
	
	.messageItem .messageCenter {
		color: rgba(0, 0, 0, .8);
		font-size: 28rpx;
		margin-top: 32rpx;
	}
	
	.messageItem .messageBottom {
		padding: 32rpx 0;
	}
</style>
